<template>
  <nut-wrapper>
    <view class="login-container">
      <!-- Logo区域 -->
      <view class="logo-area">
        <i class="iconfont icon-LOGO" style="font-size: 80px"></i>
        <text class="title">欢迎登录</text>
      </view>

      <!-- 登录表单 -->
      <view class="form-container">
        <nut-form>
          <nut-form-item>
            <nut-input
              v-model="formData.username"
              placeholder="请输入用户名"
              :border="false"
            >
              <template #left>
                <i style="font-size: 24px" class="iconfont icon-user-s"></i>
              </template>
            </nut-input>
          </nut-form-item>
          <nut-form-item v-if="showPassword">
            <nut-input
              v-model="formData.password"
              type="text"
              placeholder="请输入密码"
              :border="false"
            >
              <template #left>
                <i style="font-size: 24px" class="iconfont icon-mima"></i>
              </template>
              <template #right>
                <i
                  style="font-size: 24px"
                  class="iconfont icon-kanjian"
                  @click="togglePasswordVisibility"
                ></i>
              </template>
            </nut-input>
          </nut-form-item>
          <nut-form-item v-else>
            <nut-input
              v-model="formData.password"
              type="password"
              placeholder="请输入密码"
              :border="false"
            >
              <template #left>
                <i style="font-size: 24px" class="iconfont icon-mima"></i>
              </template>
              <template #right>
                <i
                  style="font-size: 24px"
                  class="iconfont icon-a-view-off1x"
                  @click="togglePasswordVisibility"
                ></i>
              </template>
            </nut-input>
          </nut-form-item>
        </nut-form>

        <!-- 记住密码和忘记密码 -->
        <view class="options-row">
          <view class="remember-pwd">
            <nut-checkbox v-model="rememberPassword">记住密码</nut-checkbox>
          </view>
          <div class="forget-pwd" @click="showForgetPassword">忘记密码？</div>
        </view>

        <!-- 登录按钮 -->
        <nut-button
          type="primary"
          block
          :loading="isLoading"
          @click="handleLogin"
        >
          {{ isLoading ? "登录中..." : "登录" }}
        </nut-button>

        <!-- 其他登录方式 -->
        <view class="other-login">
          <nut-divider>其他登录方式</nut-divider>
          <view class="social-icons">
            <view class="social-item" @click="handleWechatLogin">
              <i style="font-size: 24px" class="iconfont icon-weixin"></i>
              <text>微信</text>
            </view>
            <view class="social-item" @click="handleAlipayLogin">
              <i
                style="font-size: 24px"
                class="iconfont icon-zhifupingtai-zhifubao"
              ></i>
              <text>支付宝</text>
            </view>
          </view>
        </view>

        <!-- 注册入口 -->
        <view class="register-entry">
          <text>还没有账号？</text>
          <p class="register-btn" @click="showRegister">立即注册</p>
        </view>
      </view>

      <!-- 注册弹窗 -->
      <nut-popup v-model:visible="registerVisible" position="center">
        <view class="popup-content">
          <view class="popup-title">注册新账号</view>
          <nut-form>
            <nut-form-item>
              <nut-input
                v-model="registerForm.username"
                placeholder="请输入用户名"
                :border="false"
              />
            </nut-form-item>
            <nut-form-item>
              <nut-input
                v-model="registerForm.password"
                type="password"
                placeholder="请输入密码"
                :border="false"
              />
            </nut-form-item>
            <nut-form-item>
              <nut-input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="请确认密码"
                :border="false"
              />
            </nut-form-item>
          </nut-form>
          <view class="popup-buttons">
            <nut-button type="primary" block @click="handleRegister"
              >注册</nut-button
            >
            <nut-button block @click="hideRegister">取消</nut-button>
          </view>
        </view>
      </nut-popup>

      <!-- 忘记密码弹窗 -->
      <nut-popup v-model:visible="forgetPasswordVisible" position="center">
        <view class="popup-content">
          <view class="popup-title">重置密码</view>
          <nut-form>
            <nut-form-item>
              <nut-input
                v-model="forgetPasswordForm.username"
                placeholder="请输入用户名"
                :border="false"
              />
            </nut-form-item>
            <nut-form-item>
              <nut-input
                v-model="forgetPasswordForm.email"
                placeholder="请输入邮箱"
                :border="false"
              />
            </nut-form-item>
          </nut-form>
          <view class="popup-buttons">
            <nut-button type="primary" block @click="handleResetPassword"
              >重置密码</nut-button
            >
            <nut-button block @click="hideForgetPassword">取消</nut-button>
          </view>
        </view>
      </nut-popup>
    </view>
  </nut-wrapper>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
  data() {
    return {
      formData: {
        username: "admin",
        password: "admin123",
      },
      registerForm: {
        username: "admin",
        password: "admin123",
        confirmPassword: "admin123",
      },
      forgetPasswordForm: {
        username: "",
        email: "",
      },
      showPassword: false,
      rememberPassword: false,
      isLoading: false,
      registerVisible: false,
      forgetPasswordVisible: false,
    };
  },
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
    async handleLogin() {
      if (!this.formData.username || !this.formData.password) {
        Taro.showToast({
          title: "请输入用户名和密码",
          icon: "none",
        });
        return;
      }

      this.isLoading = true;

      // 模拟登录请求
      setTimeout(() => {
        if (
          this.formData.username === "admin" &&
          this.formData.password === "admin123"
        ) {
          // 保存登录状态
          Taro.setStorageSync("isLoggedIn", "true");
          Taro.setStorageSync(
            "userInfo",
            JSON.stringify({
              username: this.formData.username,
            })
          );

          // 跳转到首页
          Taro.switchTab({
            url: "/pages/index/index",
          });
          Taro.showToast({
            title: "登录成功",
            icon: "success",
            duration: 2000,
          });
        } else {
          Taro.showToast({
            title: "用户名或密码错误",
            icon: "none",
          });
        }
        this.isLoading = false;
      }, 1000);
    },
    showRegister() {
      this.registerVisible = true;
    },
    hideRegister() {
      this.registerVisible = false;
      this.registerForm = {
        username: "",
        password: "",
        confirmPassword: "",
      };
    },
    handleRegister() {
      if (
        !this.registerForm.username ||
        !this.registerForm.password ||
        !this.registerForm.confirmPassword
      ) {
        Taro.showToast({
          title: "请填写完整注册信息",
          icon: "none",
        });
        return;
      }

      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        Taro.showToast({
          title: "两次输入的密码不一致",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      // 这里添加注册逻辑
      Taro.showToast({
        title: "注册成功",
        icon: "success",
        duration: 2000,
      });
      this.hideRegister();
    },
    showForgetPassword() {
      this.forgetPasswordVisible = true;
    },
    hideForgetPassword() {
      this.forgetPasswordVisible = false;
      this.forgetPasswordForm = {
        username: "",
        email: "",
      };
    },
    handleResetPassword() {
      if (!this.forgetPasswordForm.username || !this.forgetPasswordForm.email) {
        Taro.showToast({
          title: "请填写完整信息",
          icon: "none",
        });
        return;
      }

      // 这里添加重置密码逻辑
      Taro.showToast({
        title: "重置密码邮件已发送",
        icon: "success",
        duration: 2000,
      });
      this.hideForgetPassword();
    },
    handleWechatLogin() {
      Taro.showToast({
        title: "微信登录功能开发中",
        icon: "none",
      });
    },
    handleAlipayLogin() {
      Taro.showToast({
        title: "支付宝登录功能开发中",
        icon: "none",
      });
    },
  },
};
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f6f7fb 0%, #ffffff 100%);
  padding: 60rpx 40rpx;
  box-sizing: border-box;

  .logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100rpx;
    margin-bottom: 80rpx;

    .logo {
      width: 180rpx;
      height: 180rpx;
      margin-bottom: 20rpx;
    }
    text {
      color: $primary-color;
    }

    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .form-container {
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    :deep(.nut-form-item) {
      padding: 0;
      margin-bottom: 20rpx;
    }

    .options-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20rpx 0 40rpx;

      .remember-pwd {
        font-size: 26rpx;
        color: #666;
      }

      .forget-pwd {
        font-size: 26rpx;
        color: #007aff;
      }
    }

    .other-login {
      margin-top: 60rpx;

      .social-icons {
        display: flex;
        justify-content: center;
        gap: 80rpx;
        margin-top: 30rpx;

        .social-item {
          display: flex;
          flex-direction: column;
          align-items: center;

          text {
            font-size: 24rpx;
            color: #666;
            margin-top: 10rpx;
          }
        }
      }
    }

    .register-entry {
      margin-top: 40rpx;
      text-align: center;
      font-size: 26rpx;
      display: flex;
      justify-content: center;
      color: #666;

      .register-btn {
        color: #007aff;
        margin-left: 10rpx;
      }
    }
  }
}

.popup-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 600rpx;

  .popup-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
  }

  :deep(.nut-form-item) {
    padding: 0;
    margin-bottom: 20rpx;
  }

  .popup-buttons {
    margin-top: 40rpx;

    .nut-button {
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
